<template>
  <div>
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="content">
      <van-image
        width="150"
        height="150"
        round
        :src="music.al?.picUrl"
      />
    </div>
    <audio :src="audio" controls></audio>
  </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import { detail } from '@/services/song'
import { ref } from "@vue/reactivity";

const route = useRoute()
const router = useRouter()
const id:number = Number(route.query.id)
const music = ref<any>({})
const audio = ref('')
const title = ref('')

detail([id]).then(res=>{
  music.value = res.data.songs[0]
  title.value = music.value.name + music.value.ar.map((item:any)=>item.name).join('-')
  audio.value =`https://music.163.com/song/media/outer/url?id=${music.value.id}.mp3`
})

const onClickLeft = () => {
  router.go(-1)
}

</script>

<style lang="scss" scoped>
::v-deep(.van-nav-bar){
  color: #fff;
  .van-nav-bar__content{
    background-color: #73521F;
    .van-icon,
    .van-nav-bar__title{
      color: #fff;
    }
  }
}
.content{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}
</style>